<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍信息管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>
    <!--导航-->
    <!--inverted:反色、attached:没有圆角，依附在上面:m-padded-tb-mini:m自己定义,padded,上下之间内部间隔,tb上下,mini小点-->
    <!--m-shadow-small:自定义导航阴影-->
    <!--导航-->
    <nav class="ui m-bg attached segment m-padded-tb-mini m-shadow-small animated fadeInDown" >
        <div class="ui container">
            <div class="ui secondary stackable menu">
                <h2 class="ui purple header item">后台管理</h2>
                <a href="#" th:href="@{/admin/index}" class="m-item item m-mobile-hide m-black"><i class=" user secret icon"></i>欢迎页</a>
<!--                <a href="#" th:href="@{/admin/students}" class="m-item item m-mobile-hide m-black"><i class="user secret icon"></i>用户信息</a>-->
                <a href="#" th:href="@{/admin/books}" class=" m-item item m-mobile-hide m-black"><i class="users secret icon"></i>图书信息</a>
                <a href="#" th:href="@{/admin/shelf}" class="active m-item item m-mobile-hide m-black"><i class="users secret icon"></i>书架信息</a>
                <a href="#" th:href="@{/admin/borrow}" class="m-item item m-mobile-hide m-black"><i class="users secret icon"></i>借阅记录</a>
                <div class="right m-item m-mobile-hide menu">
                    <div class="ui dropdown  item">
                        <div class="text">
                            <img class="ui avatar image" src="/image/aboutCodeSleep.jpg" th:src="@{/image/aboutCodeSleep.jpg}">
                            管理员
                        </div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <a href="#" th:href="@{/admin/logout}" class="item">注销</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>

    <!--中间内容-->
    <div  class="m-container-small m-padded-tb-big">
        <div class="ui container">
            <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
                <i class="close icon"></i>
                <div class="header">提示：</div>
                <p>恭喜，操作成功！</p>
            </div>

            <div  class="ui secondary segment form">
                <input type="hidden" name="pageNum" >
                <div class="inline fields">
                    <div class="field">
                        <input type="text" id="shelfName" name="shelfName" placeholder="书架名">
                    </div>
                    <div class="field">
                        <button  type="submit" id="search-btn" class="ui purple basic button"><i class="search icon"></i>搜索</button>
                    </div>
                </div>
            </div>
            <div id="table-container">
                <table th:fragment="shelfList" class="ui celled table">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>书架名</th>
                            <th>当前可借阅数量</th>
                            <th>最大存书数量</th>
                            <th>比例（%）</th>
                            <th>状态</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="book,iterStat:${pageInfo.list}">
                            <td th:text="${book.getShelfId()}"></td>
                            <td >
                                [[${book.getShelfName()}]]
                                <span th:if="${book.getShelfRate() <0.2}" style="color: red">（低使用率）</span>
                                <span th:if="${book.getShelfRate() >0.9}" style="color: red">（高使用率）</span>
                            </td>
                            <td th:text="${book.getShelfNum}"></td>
                            <td th:text="${book.getShelfMaxNum}"></td>
                            <td th:text="${#numbers.formatDecimal(book.getShelfRate(), 1, 2)}*100 + '%'"></td>
                            <td >
                                <span th:if="${book.getShelfStatus}==1">启用</span>
                                <span th:if="${book.getShelfStatus}==0">禁用</span>
                            </td>
                            <td>
                                <a href="#" th:href="@{/admin/shelf/{id}/update(id=${book.getShelfId()})}" class="ui teal basic button">编辑</a>
                                <a href="#" th:href="@{/admin/shelf/{id}/delete(id=${book.getShelfId()})}" onclick="return confirm('您确定要删除吗？')" class="ui red basic button">删除</a>
                                <a href="#" th:href="@{/admin/ad/{id}/update(id=${book.getShelfId()})}" class="ui teal basic button">编辑广告</a>
                            </td>
                        </tr>
                    </tbody>

                    <tfoot>
                    <tr>
                        <th colspan="6" >
                            <div class="ui mini pagination menu" >
<!--                                <a class="item" th:href="@{/admin/books}">首页</a>-->
<!--                                <a onclick="page(this)" th:attr="data-page=${pageInfo.pageNum}-1"  class="item" style="color: skyblue;">-->
<!--                                    上一页-->
<!--                                </a>-->
                                <a onclick="page(this)" th:attr="data-page=${pageInfo.firstPage}" class="item" >
                                    首页
                                </a>
                                <a onclick="page(this)" th:attr="data-page=${pageInfo.pageNum}-1"
                                   th:unless="${pageInfo.isFirstPage}" class="icon item">
                                    <i class="left chevron icon"></i>
                                </a>
                                <a onclick="page(this)" th:each="p : ${pageInfo.navigatepageNums}"
                                   th:attr="data-page=${p}"
                                   th:text="${p}" class="item"
                                   th:classappend="${pageInfo.pageNum}==${p}? 'active'">1</a>
                                <a onclick="page(this)" th:attr="data-page=${pageInfo.pageNum}+1"
                                   th:unless="${pageInfo.isLastPage}" class="icon item">
                                    <i class="right chevron icon"></i>
                                </a>
                                <a onclick="page(this)" th:attr="data-page=${pageInfo.pages}" class="item">
                                    尾页
                                </a>
<!--                                <a onclick="page(this)" th:attr="data-page=${pageInfo.getPageNum()}+1" class="item" style="color: skyblue;">-->
<!--                                    下一页-->
<!--                                </a>-->
<!--                                <a class="item" th:href="@{/admin/books(pageNum=${pageInfo.pages})}">尾页</a>-->
                            </div>
                            <p >当前第<span th:text="${pageInfo.pageNum}"></span>页
                                总<span th:text="${pageInfo.pages}"></span>页
                                共<span th:text="${pageInfo.total}"></span>条记录</p>
                            <a href="#"  th:href="@{/admin/shelf/input}" class="ui right floated teal basic button" data-target="#myModal">新增</a>
                        </th>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <br>
    <br>
    <!--底部footer-->
    <footer th:fragment="footer" class="ui m-bg animated fadeInUp inverted vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                    </div>
                </div>
                <div class="three wide column">
                    <div id="newblog-container">
                    </div>
                </div>
                <div class="three wide column">

                </div>
            </div>
            <div class="ui inverted m-black section divider"></div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

    <script th:inline="javascript">

        var message = [[${message}]];
        if(message != null){
            alert(message)
        }

        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
        });

        $('.ui.dropdown').dropdown({
            on : 'hover'
        });

        //消息提示关闭初始化
        $('.message .close')
            .on('click', function () {
                $(this)
                    .closest('.message')
                    .transition('fade');
            });

        function page(obj) {
            $("[name='pageNum']").val($(obj).data("page"));//获取page隐含域赋值
            loaddata();
        }

        // 点击事件；page清零，搜索不会查询某一页
        $("#search-btn").click(function () {
            // $("[name='pageNum']").val(0);
            loaddata();
        });

        //用来请求发送数据
        function loaddata() {
            $("#table-container").load("/admin/shelf/search",{
                shelfName : $("[name='shelfName']").val(),
                pageNum : $("[name='pageNum']").val()
            });
        }

    </script>
    <script src="../../static/js/colourBar.js" th:src="@{/js/colourBar.js}" tppabs="../../static/js/colourBar.js"></script>


</body>
</html>